<script>
import axios from "axios";
import { ref } from "vue";
import global from "@/views/global/global";
export default {
  //组件部件
  setup(){
    const updateDialogVisible = ref(false);
    const saveDialogVisible = ref(false);
    return {
      updateDialogVisible,
      saveDialogVisible,
    }
  },
  data(){
    return {
      document:{
        title:"",
        content:"",
        documentType:"",
        createdBy:global.user.id,
        isPublic:1,
        //当前日期时间
        createdAt:new Date(),
      },
      pageDto:{
        pageSize:2,
        pageNum:1,
        data:{
          title:"",
          realName:"",
          createdAt:"",
          createdAt2:""
        }
      },
      DocumentList:[],
      total:0,
      pages:0,
    }
  },
  methods:{
    getData:function(){
      console.log(this.pageDto)
      //以json格式传参
      axios.post("/oa/document/pagingSel",this.pageDto).then((res)=>{
        console.log(res.data.data)
        this.pageDto.pageNum=res.data.data.pageNum;
        this.pageDto.pageSize = res.data.data.pageSize;
        this.total=res.data.data.total;
        this.pages=res.data.data.pages;
        this.DocumentList=res.data.data.list;
      })
    },
    deleteDocument(index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`/oa/document/deleteDocument/${row.documentId}`)
            .then((data) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getData()
            })
            .catch((error) => {
              console.log(error)
            })
      }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      )
    },
    getUp(){
      this.saveDialogVisible = true;
      this.isPublic=1
      this.document.documentType=""
    },
    saveDocument(){

      if(this.document.documentType === null || this.document.documentType === ""){
        this.$message({
          type: 'warning',
          message: '请选择文件类型!'
        });
        return;
      }

      axios.post("/oa/document/saveDocument",this.document).then((res)=>{
        if(this.document.title === null || this.document.title === undefined || this.document.title === ""){
          this.$message({
            type: 'warning',
            message: '标题不能为空!'
          });
          return;
        }

       if (res.data.code===1){
         this.$message({
           type: 'success',
           message: '添加成功!'
         });

         this.getData()
         this.saveDialogVisible = false;
       }
      })
    },
    getPath(res){
    //   获取上传成功后返回的路径
      this.document.content=res.data.filePath;
      this.document.title=res.data.fileName;
    },
    error(){
      //返回上传失败信息
      this.$message({
        type: 'error',
        message: '上传失败!'
      });
    },save() {

    },
  },
  created() {
    this.getData();
  }
}
</script>

<template>
<div>
  <div class="titleBox"  style="
    border-bottom: darkgray 1px solid;
    line-height: 40px;
    font-weight: bold;">文档列表</div>
  <br>
  <div>
  <!-- 首页表格信息显示 -->
    <div class="mt-4">
    文件名:
    <el-input
        v-model="this.pageDto.data.title"
        style="max-width: 150px"
        placeholder="请输入文件名"
    >

    </el-input>
    &nbsp;&nbsp;
    所有者:
    <el-input
        v-model="this.pageDto.data.realName"
        style="max-width: 150px"
        placeholder="请输入所有者"
    >
    </el-input>&nbsp;&nbsp;
      创建日期:
        <el-date-picker
            v-model="pageDto.data.createdAt"
            style="max-width: 180px"
            type="datetime"
            placeholder="开始时间"
        />&nbsp;&nbsp;
      <el-date-picker
          v-model="pageDto.data.createdAt2"
          style="max-width: 180px"
          type="datetime"
          placeholder="结束时间"
      />&nbsp;&nbsp;
    <el-button @click="getData">
      查询
    </el-button>
      <el-button @click="getUp()">
        新增
      </el-button>
    </div>
  <el-table :data="this.DocumentList" style="width: 100%">

    <el-table-column label="名称：">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.title}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="类型：">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.documentType }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="所有者：">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.realName }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="创建时间：">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.updatedAt }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="操作：">
      <template #default="scope">
        <el-button size="small" type="danger" @click="deleteDocument(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>



  <!-- 分页-->
  <el-pagination
      v-model:current-page="this.pageDto.pageNum"
      :page-size="this.pageDto.pageSize"
      :pager-count="this.pages"
      layout="prev, pager, next"
      :total="this.total"
      @current-change="getData"
  />
  </div>
</div>

  <el-dialog
      v-model="saveDialogVisible"
      title="新增文件"
      width="600"
  >
    <el-form :model="document" label-width="80px">
      <el-form-item label="文件名：" >
        <el-input v-model="document.title" disabled ></el-input>
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-date-picker disabled
            v-model="this.document.createdAt"
            type="datetime"
        />
      </el-form-item>
      <el-form-item label="是否公开：">
        <el-radio v-model="document.isPublic" label="1" :value="1" >是</el-radio>
        <el-radio v-model="document.isPublic" label="0" :value="0">否</el-radio>
      </el-form-item>
      <el-form-item label="路径：">
        <el-input v-model="document.content"  disabled></el-input>
      </el-form-item>
      <el-form-item label="文件类型：">
        <el-select v-model="document.documentType" placeholder="请选择文件类型">
          <el-option
              v-for="item in [{'value':'.word','label':'word'},{'value':'.excel','label':'excel'},{'value':'.ppt','label':'ppt'}
              ,{'value':'.pdf','label':'pdf'},{'value':'.txt','label':'txt'},{'value':'.png','label':'png'}]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!--        文件上传-->
      <el-form-item label="文件">
        <el-upload
            class="upload-demo"
            action="http://localhost:8090/oa/document/upload"
            :on-success="getPath"
            :on-error="error"
            :limit="1"
            :auto-upload="true"
        >
          <el-button size="small" type="primary" >点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-button type="primary" @click="saveDocument()">提交</el-button>

    </el-form>
  </el-dialog>
</template>

<style scoped lang="less">

</style>
